<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="14">
  <el-card shadow="hover" style="width: 100%;">
      <div style="width: 100%; display: inline-block; ">
          <el-statistic :value="deadline" time-indices title="🎉商品降价🎉" @finish="beginkill">
              <template slot="suffix">
                抢购即将开始
              </template>
          </el-statistic>
        </div>
  </el-card>
  <el-card shadow="hover" style="width: 100%;margin-top: 20px;">
          <div style="width: 100%; display: inline-block; ">
            <el-statistic title="存储内存大降价(每人限购一份)">
              <template slot="suffix">
                <el-image style="width: 100%; height: 100%" :src="url" fit="cover"></el-image>
                <span style="font-family:'ZCOOLKuaiLe-Regular'; color: red; margin: 10px;">1RMB==1GB</span>
                <span style="font-family:'ZCOOLKuaiLe-Regular'; color: greenyellow; margin: 10px;background: #24232386">库存还剩{{total}}份</span>
                <br>
                <el-button v-show="end" type="warning" size="mini" disabled>活动结束</el-button>
                <el-button v-show="!begin&&!end" type="primary" size="mini" disabled>敬请期待</el-button>
                <el-button v-show="begin&&!end" type="success" size="mini" @click="seckill">立即抢购</el-button>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card shadow="hover">
    <div class="card-header clearfix">
      <span>抢购成功用户榜单</span>
    </div>
    <div class="scrollbar-wrapper">
      <div v-for="(user, index) in users" :key="index" class="user-item">
        {{index + 1}}. {{user}}
      </div>
    </div>
  </el-card>
    </el-col>
    </el-row>
  </div>
</template>

<script>
 import axios from 'axios'
export default {
  data() {
      return {
        total:"???",
        SecKillTime:"2023-12-28 14:18:00",
        begin:false,
        end:false,
        url:[
          require("../../assets/pc/SecKill.jpg"),
        ],
        users:[]
      };
    },
    methods:{
      beginkill(){
        this.begin = true
      },
      seckill(){
        axios.get(`/api/seckill?email=${localStorage.getItem("email")}&username=${localStorage.getItem("nickname")}`).then(
          response=>{
        if(response.data.code==200){
          this.$message({
                type: 'success',
                message: '抢购成功!'
              });
        }else{
          this.$message.error(response.data.message)
        }
      },
      error=>{
        this.$message.error("抢购失败");
        console.log(error.$message)
      }
    )
      }
    },
    computed:{
      deadline(){
        return new Date(this.SecKillTime)
      },
    },
    mounted(){
      axios.get(`/api/getKillInfo?email=${localStorage.getItem("email")}`).then(
      response=>{
        if(response.data.code==200){
          if(response.data.data.total!==null){
            this.total=response.data.data.total
            if(this.total<=0){
              this.end=true
            }
          }
          if(response.data.data.SecKillTime!==null){
            this.SecKillTime=response.data.data.SecKillTime
          }
          this.users = response.data.data.seckillusers
        }else{

          this.$message.error("活动显示失败")
        }
      },
      error=>{
        this.$message.error("活动显示失败");
        console.log(error.$message)
      }
    )
    },

}
</script>

<style>
.card-header {
  padding: 10px;
}

.scrollbar-wrapper {
  max-height: 300px;
  overflow-y: auto; /* Add this property to enable vertical scrollbar */
}
.user-item {
  font-size: 18px;
  font-family: 'ZCOOLKuaiLe-Regular';
  color: greenyellow;
  background: #24232386;
  padding: 10px;
  margin: 5px 0;
}
</style>